<template>
    <div class="paramBox">
        <table v-if="detail.params && detail.params.length>0">
                <template v-for="n in Math.ceil(detail.params.length/2)" :key="`row${n}`">
                    <tr>
                        <template v-for="(dt,i) in detail.params" :key="`pt${i}`">
                            <template v-if="i>=2*(n-1) && i<2*n">
                                <th>{{dt.paramName}}</th><td>{{dt.paramValue}}</td>
                            </template>
                        </template>
                        <!---以下为占位--->
                        <template v-if="detail.params.length%2">
                            <th></th><td></td>
                        </template>
                    </tr>
                </template>
        </table>
        <empty v-if="!detail.params || detail.params.length<1" title="无商品参数说明"/>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import empty from '@/components/empty.vue'
export default {
    components:{
       empty
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo)
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .paramBox{
        width: 100%;
        table{
            width: 100%;
            td,th{
                height: 64px;
                background: rgba(244, 194, 139, 0.3);
                font-weight: normal;
                font-size: 28px;
                text-align: center;
            }
        }
    }
</style>